<template>
    <!-- 规则配置新增/修改弹窗 -->
    <div>
        <el-dialog v-model="dialogVisible" width="600px" :before-close="handleClose" :title="title" center>
            <div style="padding: 20px;">
                <el-form :model="form" ref="formRef" label-width="160px" label-suffix="：" :rules="rules">
                    <el-form-item label="关联告警规则" prop="ruleId">
                        <el-select v-model="form.ruleId" placeholder="请选择关联告警规则">
                            <el-option :label="item.ruleName" :value="item.id" v-for="item in ruleList" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="告警触发动作类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择告警触发动作类型">
                            <el-option :label="item.label" :value="item.value" v-for="item in actionTypes" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="接收告警通知目标" prop="recipientId">
                        <el-select v-model="form.recipientId" placeholder="请选择接收告警通知目标">
                            <el-option :label="item.nickname" :value="item.id" v-for="item in actionUsers" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="告警内容" prop="message">
                        <el-input v-model="form.message" type="textarea" clearable placeholder="请输入告警内容"></el-input>
                    </el-form-item>
                    <div style="text-align: center">
                        <el-button type="primary" @click="handleSubmit">保存</el-button>
                        <el-button @click="handleClose">取消</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>

import { updateAction, createAction } from "@/api/alert"
import { reactive, ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const title = ref('')

// props接收父组件的actionTypes
const props = defineProps({
    actionTypes: {
        type: Array,
        default: () => []
    },
    actionUsers: {
        type: Array,
        default: () => []
    },
    ruleList: {
        type: Array,
        default: () => []
    },
})


const dialogVisible = ref(false)
const form = reactive({
    ruleId: '',
    type: '',
    recipientId: '',
    message: ''
})
const rules = {
    ruleId: [
        { required: true, message: '请选择关联告警规则', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择告警触发动作类型', trigger: 'blur' }
    ],
    recipientId: [
        { required: true, message: '请选择接收告警通知目标', trigger: 'blur' }
    ],
    message: [
        { required: true, message: '请输入告警内容', trigger: 'blur' }
    ]
}

const formRef = ref(null)

const handleClose = () => {
    dialogVisible.value = false
}
const showDialog = async (updateData) => {
    resetForm();
    dialogVisible.value = true
    if (updateData) {
        title.value = '修改告警动作'
        Object.assign(form, updateData);
        return
    }
    title.value = '新增告警动作'
}




// 创建规则
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            if(form.id){
                updateAction(form).then(() => {
                    handleClose();
                    resetForm();
                    proxy.$message.success('规则配置修改成功')
                    // 刷新规则列表
                    proxy.$emit('refresh')
                })
                return
            }
            createAction(form).then(() => {
                handleClose();
                resetForm();
                proxy.$message.success('规则配置保存成功')
                // 刷新规则列表
                proxy.$emit('refresh')
            })
        }
    })
}


// 重置表单
const resetForm = () => {
     form.ruleId = ''
     form.type = ''
     form.recipientId = ''
     form.message = ''
     form.id = ''
     // 重置表单验证
     proxy && proxy.$refs.formRef && proxy.$refs.formRef.resetFields()
}

defineExpose({
    showDialog
})

</script>

<style lang="scss" scoped></style>